<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>滚动动画</title>
  <script src="../gsap.min.js"></script>
  <script src="../gsap-public/minified/ScrollTrigger.min.js"></script>
  <script src="../gsap-public/minified/ScrollToPlugin.min.js"></script>
  <style>
    /* Most of these styles could be removed but are for the demo to look better */

    html,
    body {
      margin: 0;
      height: 100%;
      font-weight: 300;
    }

    a {
      color: white;
    }

    h1,
    h2 {
      text-align: center;
    }

    .full-screen {
      display: block;
      width: 100%;
      height: 100vh;
      overflow: hidden;
    }

    #intro {
      display: flex;
      flex-direction: column;
      justify-content: center;
      background-color: yellow;
    }

    #masthead {
      position: fixed;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      z-index: 9999;
    }

    #masthead a {
      padding: 1rem 2rem;
    }


    #panels #panels-container {
      height: 100vh;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
      padding: 0;
      overflow: hidden;
      background-color: #ddd;
    }

    #panels #panels-container .panel {
      position: relative;
      width: 100%;
      height: 100vh;
      overflow: hidden;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      color: #333;
      text-align: left;
      border-right: 1px solid #f00;
    }

    #panels #panels-container .panel img {
      max-width: 100%;
      height: auto;
      display: block;
    }

    #panels #panels-container .panel .panels-navigation {
      width: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: end;
      -ms-flex-pack: end;
      justify-content: flex-end;
    }

    #panels #panels-container .panel .anchor-panel,
    #panels #panels-container .panel .nav-panel {
      color: #000;
      text-transform: uppercase;
      margin-right: 2rem;
    }

    #panels #panels-container .panels-navigation {
      position: absolute;
      width: 100%;
      bottom: 2rem;
      right: 2rem;
    }
    #map {
      background-color: blue;
    }
  </style>
</head>

<body>
  <div id="page" class="site">

    <div id="feather" class="feather"></div>

    <header id="masthead" class="site-header" role="banner">
      <nav class="anchor-nav" role="navigation">
        <a href="#intro" class="anchor">Home</a>
        <a href="#panel-1" class="anchor">Panel 1</a>
        <a href="#panel-3" class="anchor">Panel 3</a>
        <a href="#panel-5" class="anchor">Panel 5</a>
        <a href="#map" class="anchor">Map</a>
      </nav>
    </header>

    <main id="content" class="site-content" role="main">

      <section id="intro" class="full-screen pt-5 blue">
        <h1>A cool title</h1>

        <div id="clouds-layer-1" class="clouds"></div>
        <div id="clouds-layer-2" class="clouds"></div>
      </section>

      <section id="panels">

        <div id="panels-container" style="width: 500%;">
          <article id="panel-1" class="panel full-screen red">
            <div class="container">
              <div class="row">
                <div class="col-6">

                  <img src="" alt="">

                </div>
                <div class="col-6 d-flex flex-column">

                  <h2>Panel 1</h2>

                  <p class="step-description">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Including versions of
                    Lorem Ipsum.
                  </p>

                  <div class="panels-navigation text-right">
                    <div class="nav-panel" data-sign="plus"><a href="#panel-2" class="anchor">Next</a></div>
                  </div>
                </div>
              </div>
            </div>
          </article>
          <article id="panel-2" class="panel full-screen orange">
            <div class="container">
              <div class="row">
                <div class="col-6">

                  <img src="" alt="">

                </div>
                <div class="col-6 d-flex flex-column">

                  <h2>Panel 2</h2>

                  <p class="step-description">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Including versions of
                    Lorem Ipsum.
                  </p>

                  <div class="panels-navigation">
                    <div class="nav-panel" data-sign="minus"><a href="#panel-1" class="anchor">Prev</a></div>
                    <div class="nav-panel" data-sign="plus"><a href="#panel-3" class="anchor">Next</a></div>
                  </div>
                </div>
              </div>
            </div>
          </article>
          <article id="panel-3" class="panel full-screen purple">
            <div class="container">
              <div class="row">
                <div class="col-6">

                  <img src="" alt="">

                </div>
                <div class="col-6 d-flex flex-column">

                  <h2>Panel 3</h2>

                  <p class="step-description">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Including versions of
                    Lorem Ipsum.
                  </p>

                  <div class="panels-navigation">
                    <div class="nav-panel" data-sign="minus"><a href="#panel-2" class="anchor">Prev</a></div>
                    <div class="nav-panel" data-sign="plus"><a href="#panel-4" class="anchor">Next</a></div>
                  </div>
                </div>
              </div>
            </div>
          </article>
          <article id="panel-4" class="panel full-screen green">
            <div class="container">
              <div class="row">
                <div class="col-6">

                  <img src="" alt="">

                </div>
                <div class="col-6 d-flex flex-column">

                  <h2>Panel 4</h2>

                  <p class="step-description">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Including versions of
                    Lorem Ipsum.
                  </p>

                  <div class="panels-navigation">
                    <div class="nav-panel" data-sign="minus"><a href="#panel-3" class="anchor">Prev</a></div>
                    <div class="nav-panel" data-sign="plus"><a href="#panel-5" class="anchor">Next</a></div>
                  </div>
                </div>
              </div>
            </div>
          </article>
          <article id="panel-5" class="panel full-screen gray">
            <div class="container">
              <div class="row">
                <div class="col-6">

                  <img src="" alt="">

                </div>
                <div class="col-6 d-flex flex-column">

                  <h2>Panel 5</h2>

                  <p class="step-description">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Including versions of
                    Lorem Ipsum.
                  </p>

                  <div class="panels-navigation text-right">
                    <div class="nav-panel" data-sign="minus"><a href="#panel-4" class="anchor">Prev</a></div>
                  </div>
                </div>
              </div>
            </div>
          </article>
        </div>
      </section>

      <section id="map" class="full-screen"></section>

    </main>

  </div>

  <script>
    gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);

    ScrollTrigger.defaults({
      toggleActions: "restart pause resume pause"
    });

    /* Main navigation */
    const panelsSection = document.querySelector("#panels");
    const panelsContainer = document.querySelector("#panels-container");
    document.querySelectorAll(".anchor").forEach(anchor => {
      anchor.addEventListener("click", function (e) {
        e.preventDefault();

        const targetElem = document.querySelector(e.target.getAttribute("href"));
        if (targetElem && panelsContainer.isSameNode(targetElem.parentElement)) {
          const containerOffset = panelsSection.offsetTop + targetElem.offsetLeft;

          gsap.to(window, {
            scrollTo: {
              y: containerOffset,
              autoKill: false
            },
            duration: 1
          });
        } else {
          gsap.to(window, {
            scrollTo: {
              y: targetElem,
              autoKill: false
            },
            duration: 1
          });
        }
      });
    });

    /* Panels */
    const panels = gsap.utils.toArray("#panels-container .panel");
    gsap.to(panels, {
      xPercent: -100 * (panels.length - 1),
      ease: "none",
      scrollTrigger: {
        trigger: "#panels-container",
        pin: true,
        start: "top top",
        scrub: 1,
        snap: {
          snapTo: 1 / (panels.length - 1),
          duration: { min: 0.1, max: 0.1 }
        },
        end: () => "+=" + (panelsContainer.offsetWidth - innerWidth)
      }
    });

  </script>
</body>

</html>